<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta name="keywords" content="我的订单" />
    <meta name="description" content="我的订单" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Conorder_content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link th:href="@{/shoppingApi/css/public.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/order.css}" rel="stylesheet">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
</head>
<body>
<div class="main_new order">
    <div class="main_con c323232">
        <!--<div class="goback fixed-back" style="position: fixed;"><h3 onclick="location.href='/wap/openUserCenter'">我的订单</h3></div>-->
        <ul class="banner c323232 ft15 overflow ftc bgfff">
            <li><span><a href="/wap/getOrderList?orderStatus=0">全部</a></span></li>
            <li><span><a href="/wap/getOrderList?orderStatus=701">待付款</a></span></li>
            <li class="active"><span>待发货</span></li>
            <li><span><a href="/wap/getOrderList?orderStatus=703">待收货</a></span></li>
            <li><span><a href="/wap/getOrderList?orderStatus=704">待评价</a></span></li>
        </ul>
        <ul id="orderList" class="goodlist" th:if="${#lists.size(orderList.list)>0}" style="margin-top: 45px;">
            <li th:each="modelS:${orderList.list}">
                <p class="pl15 pr15 shop flex bgfff mt15 flex-ac">
                    <img th:src="@{/shoppingApi/images/carttip.png}">
                    <span class="c323232 ml5 it1">
                         <img class="shopimg db" th:src="@{/shoppingApi/images/shopimg.png}">
                        <!--<span class="ft14 db shoptitle">新零售微店</span>-->
                        <!--<span class="ft7 db shopeng">YUNCHUANGSHEQU</span>-->
                    </span>
                    <span class="ft14 cf70029 fr" th:if="${modelS.orderStatus=='701'}">待付款</span>
                    <span class="ft14 cf70029 fr" th:if="${modelS.orderStatus=='702'}">待发货</span>
                    <span class="ft14 cf70029 fr" th:if="${modelS.orderStatus=='703'}">待收货</span>
                    <span class="ft14 cf70029 fr" th:if="${modelS.orderStatus=='704'}">待评价</span>
                    <span class="ft14 cf70029 fr" th:if="${modelS.orderStatus=='705'}">交易完成</span>
                    <span class="ft14 cf70029 fr" th:if="${modelS.orderStatus=='706'}">已关闭</span>
                </p>
                <div>
                    <div class="orderLayer">

                        <div th:each="model,numis:${modelS.orderDetailsProducts}" class="pad15 goodmess flex">
                            <a class="db" th:href="${'/wap/getDetails?productId='+model.productId}">
                                <img class="w100" th:src="${'http://xlspic.ycsqd.com'+model.imgUrl}">
                            </a>
                            <a class="ml15 it1 flex flex-col rela db" th:href="${'/wap/getOrderDetails?orderNo='+modelS.orderNo}">
                                <p class="ft14 bold c323232 textoverflow" th:text="${model.productName}"></p>
                                <p class="ft12 c969696" th:text="${model.productDesc}"></p>
                                <p class="abs bottom0 left0 w100">
                                    <!--<span class="ft17 c646464 textover"></span>-->
                                    <!--<span class="ft17 cf70029" th:text="${'￥'+model.productPrice}"></span>-->
                                    <!--<span class="fr ft17 c323232" th:text="${'×'+model.productCount}"></span>-->
                                    <span th:if="${model.isMoreAddress==0}" class="ft17 cf70029" th:text="${'￥'+model.productPrice}"></span>
                                    <span th:if="${model.isMoreAddress==1}" class="ft17 cf70029" th:text="${''}"></span>
                                    <span th:if="${model.isMoreAddress==0}"  class="fr ft17 c323232" th:text="${'×'+model.productCount}"></span>
                                    <span th:if="${model.isMoreAddress==1}"  class="fr ft17 c323232" th:text="${'×'+model.productCount+'提'}"></span>
                                </p>
                            </a>
                        </div>

                    </div>
                    <div class="bgfff pad15">
                        <p class="ft15 c323232 ftr">
                            <span th:text="${'共计'+modelS.count+'件商品'}"></span>
                            <span class="ml15">合计：</span>
                            <span class="cf70029" th:text="${'￥'+#numbers.formatDecimal((modelS.realPay+modelS.freight), 1, 2)}"></span>
                        </p>
                        <!--<p class="mt10 ft15 ftr">-->
                            <!--<span class="c323232 cancel mr15 canceloder">取消订单</span>-->
                            <!--<a href="pay.html" class="cf70029 gotopay dib">立即付款</a>-->
                        <!--</p>-->
                    </div>
                </div>
            </li>

            <!--<li>-->
                <!--<p class="pl15 pr15 shop flex bgfff mt15 flex-ac">-->
                    <!--<img src="./images/carttip.png">-->
                    <!--<span class="c323232 ml5 it1">-->
                <!--<img class="shopimg db" src="./images/shopimg.png">-->
                        <!--&lt;!&ndash;<span class="ft14 db shoptitle">新零售微店</span>&ndash;&gt;-->
                        <!--&lt;!&ndash;<span class="ft7 db shopeng">YUNCHUANGSHEQU</span>&ndash;&gt;-->
            <!--</span>-->
                    <!--<span class="ft17 c969696 fr">已取消</span>-->
                <!--</p>-->
                <!--<div>-->
                    <!--<div class="pad15 goodmess flex">-->
                        <!--<a class="db" href="./detail.html">-->
                            <!--<img class="w100" src="./images/classimg6.png">-->
                        <!--</a>-->
                        <!--<a class="ml15 it1 flex flex-col rela db" href="订单详情.html">-->
                            <!--<p class="ft14 c323232">【日晒纳米洗衣片】</p>-->
                            <!--<p class="ft14 c323232">去污护色洗衣片、贴身衣物洗衣片</p>-->
                            <!--<p class="abs bottom0 left0 w100">-->
                                <!--<span class="ft17 c646464 textover">￥66.00</span>-->
                                <!--<span class="ft17 cf70029">￥4.00</span>-->
                                <!--<span class="fr ft17 c323232">×1</span>-->
                            <!--</p>-->
                        <!--</a>-->
                    <!--</div>-->
                    <!--<div class="bgfff pad15">-->
                        <!--<p class="ft17 c323232 ftr pb15">-->
                            <!--<span>共计1件商品</span>-->
                            <!--<span class="ml15">合计：</span>-->
                            <!--<span class="cf70029">￥4.00</span>-->
                        <!--</p>-->
                        <!--<p class="mt10 ft15 ftr">-->
                            <!--<span class="c323232 cancel">删除订单</span>-->
                        <!--</p>-->
                    <!--</div>-->
                <!--</div>-->

            <!--</li>-->
            <!--<li>-->
                <!--<p class="pl15 pr15 shop flex bgfff mt15 flex-ac">-->
                    <!--<img src="./images/carttip.png">-->
                    <!--<span class="c323232 ml5 it1">-->
                <!--<img class="shopimg db" src="./images/shopimg.png">-->
                        <!--&lt;!&ndash;<span class="ft14 db shoptitle">新零售微店</span>&ndash;&gt;-->
                        <!--&lt;!&ndash;<span class="ft7 db shopeng">YUNCHUANGSHEQU</span>&ndash;&gt;-->
            <!--</span>-->
                    <!--<span class="ft17 c969696 fr">已取消</span>-->
                <!--</p>-->
                <!--<div>-->
                    <!--<div class="pad15 goodmess flex">-->
                        <!--<a class="db" href="./detail.html">-->
                            <!--<img class="w100" src="./images/classimg6.png">-->
                        <!--</a>-->
                        <!--<a class="ml15 it1 flex flex-col rela db" href="订单详情.html">-->
                            <!--<p class="ft14 c323232">【日晒纳米洗衣片】</p>-->
                            <!--<p class="ft14 c323232">去污护色洗衣片、贴身衣物洗衣片</p>-->
                            <!--<p class="abs bottom0 left0 w100">-->
                                <!--<span class="ft17 c646464 textover">￥66.00</span>-->
                                <!--<span class="ft17 cf70029">￥4.00</span>-->
                                <!--<span class="fr ft17 c323232">×1</span>-->
                            <!--</p>-->
                        <!--</a>-->
                    <!--</div>-->
                    <!--<div class="bgfff pad15">-->
                        <!--<p class="ft17 c323232 ftr pb15">-->
                            <!--<span>共计1件商品</span>-->
                            <!--<span class="ml15">合计：</span>-->
                            <!--<span class="cf70029">￥4.00</span>-->
                        <!--</p>-->
                        <!--<p class="mt10 ft15 ftr">-->
                            <!--<a href="物流信息.html" class="c323232 cancel dib">查看物流</a>-->
                        <!--</p>-->
                    <!--</div>-->
                <!--</div>-->

            <!--</li>-->
        </ul>
        <div class="goodlist" th:if="${#lists.size(orderList.list)==0}">
            <span class="no-order"></span>
        </div>


            <div style="display: none;"  class="weui-loadmore">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
                <input type="hidden" value="1" id="page"/>
            </div>


    </div>
</div>
<!--<a class="back-user-btn" href="/wap/openUserCenter"><span>返回个人中心</span></a>-->
<!--快速导航-->
<div class="mini-mask"></div>
<div class="mini-btn"></div>
<div class="mini-nav">
    <ul>
        <li><a href="/">
            <h5>首页</h5>
        </a></li>
        <li><a href="/wap/selectProductYJAndRjClassfy">
            <h5>分类</h5>
        </a></li>
        <li><a href="javascript:sharebtn()">
            <h5>分享</h5>
        </a></li>
        <li><a href="/wap/openUserCenter">
            <h5>个人中心</h5>
        </a></li>
        <li><a href="javascript:alert('敬请期待...')">
            <h5>店铺</h5>
        </a></li>
        <li><a href="/wap/getCartList">
            <h5>购物车</h5>
        </a></li>
        <li><a href="javascript:alert('敬请期待...')">
            <h5>联系客服</h5>
        </a></li>
    </ul>
</div>
<div id="mini-popup" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal share-layer">
        <p class="flex mt20 mb20 flex-ac pl15 pr15">
            <span class="ml20 mr20 it1 lineh1"></span>
            <span class="ft14 c323232">分享到</span>
            <span class="ml20 mr20 it1 lineh1"></span>
        </p>
        <ul class="overflow ft14 c323232 ftc">
            <li id="miniShareMessage">
                <img class="wxhaoyou" th:src="@{/shoppingApi/images/share1.png}">
                <p class="mt10 ">微信好友</p>
            </li>
            <li id="miniShareTimeline">
                <img th:src="@{/shoppingApi/images/share2.png}">
                <p class="mt10">朋友圈</p>
            </li>
        </ul>
        <img class="close close-popup" th:src="@{/shoppingApi/images/close3.png}">
    </div>
</div>
<!--/快速导航-->
</body>
<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<script th:src="@{/shoppingApi/js/common.js}"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/plusShare.js}"></script>
<script th:src="@{/shoppingApi/js/mininav.js}"></script>

<script type="application/javascript">
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)
            return  unescape(r[2]);
        return null;
    }
    var state=GetQueryString('orderStatus');
    $(function () {
        history.pushState({page: 1}, 'title', '/wap/openUserCenter');
    });
    var header = $("meta[name='_csrf_header']").attr("content");
    var token =$("meta[name='_csrf']").attr("content");

    var loading = false;
    var page=parseInt($("#page").val());
    $(document.body).infinite(80).on("infinite", function() {
        $(".weui-loadmore").show();
        if(loading) return;
        loading = true;
        page=page+1;
        $.ajax({
            url: '/wap/getOrderListPage?page='+page+"&orderStatus="+state,
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function(data){
                if(data.orderList==null||data.orderList=="")
                {
                    loading=true;
                    $(".weui-loadmore__tips").html("没有更多了")
                    $(".weui-loading").css("width","0px");
                }
                else {
                    getOrderHtml(data);
                    loading = false;
                    $("#page").val(page);
                    $(".weui-loadmore").hide();
                }
            },
            beforeSend : function(xhr) {
                xhr.setRequestHeader(header, token);
            }
        });
    });

    function getOrderHtml(data) {
        var html="";
        $.each(data.orderList, function(i, item){
            var strOrderStatus="";
            if(item.orderStatus==701){strOrderStatus="待付款";}
            else if(item.orderStatus==702){strOrderStatus="待发货";}
            else if(item.orderStatus==703){strOrderStatus="待收货";}
            else if(item.orderStatus==704){strOrderStatus="待评价";}
            else if(item.orderStatus==705){strOrderStatus="交易完成";}
            else if(item.orderStatus==706){strOrderStatus="已关闭";}
            html +="<li>" +
                "                <p class='pl15 pr15 shop flex bgfff mt15 flex-ac'>" +
                "                    <img src='/shoppingApi/images/carttip.png'>" +
                "                    <span class='c323232 ml5 it1'>" +
                "                         <img class='shopimg db' src='/shoppingApi/images/shopimg.png'>" +
                "                    </span>" +
                "                    <span class='ft14 cf70029 fr'>"+strOrderStatus+"</span>" +
                "                </p>" +
                "                <div>" +
                "                    <div class='orderLayer'>";
            $.each(item.orderDetailsProducts, function(j, itemj){
                var s1="";var s2=0;
                if(itemj.isMoreAddress==1){
                    s2='×'+itemj.productCount+'提';
                }else {
                    s1='￥'+itemj.productPrice.toFixed(2);
                    s2='×'+itemj.productCount;
                }
                html +="                        <div class='pad15 goodmess flex'>" +
                    "                            <a class='db' href='/wap/getDetails?productId="+itemj.productId+"'>" +
                    "                                <img class='w100' src='"+itemj.imgUrl+"'>" +
                    "                            </a>" +
                    "                            <a class='ml15 it1 flex flex-col rela db' href='/wap/getOrderDetails?orderNo="+item.orderNo+"'>" +
                    "                                <p class='ft14 bold c323232 textoverflow'>"+itemj.productName+"</p>" +
                    "                                <p class='ft12 c969696'>"+itemj.productDesc+"</p>" +
                    "                                <p class='abs bottom0 left0 w100'>" +
                    "                                    <!--<span class=\"ft17 c646464 textover\"></span>-->\n" +
                    "                                    <span class='ft17 cf70029'>"+s1+"</span>" +
                    "                                    <span class='fr ft17 c323232'>"+s2+"</span>" +
                    "                                </p>" +
                    "                            </a>" +
                    "                        </div>"
            });
            html +="</div>" +
                "                    <div class='bgfff pad15'>" +
                "                        <p class='ft17 c323232 ftr pb15'>" +
                "                            <span>共计"+item.count+"件商品</span>" +
                "                            <span class='ml15'>合计：</span>" +
                "                            <span class='cf70029'>"+(item.realPay+item.freight).toFixed(2)+"</span>" +
                "                        </p>" +
                "                        <p class='mt10 ft15 ftr'>" +
                "                            <span class='c323232 cancel mr15 canceloder'>取消订单</span>" +
                "                            <a href='pay.html' class='cf70029 gotopay dib'>立即付款</a>" +
                "                        </p>" +
                "                    </div>" +
                "                </div>" +
                "            </li>";
        });
        $("#orderList").append(html);
    }

    $(".back").on('click',function () {
        window.history.back(-1);
    })
    $(".banner li").on('click',function () {
        if(!$(this).hasClass("active")){
            $(this).siblings().removeClass("active")
            $(this).addClass("active")
        }
    })
    // $(".canceloder").on('click',function () {
    //     $.confirm({
    //         title: '取消订单确认',
    //         text: '你确定要取消该订单？',
    //         onOK: function () {
    //
    //         },
    //         onCancel: function () {
    //         }
    //     });
    // })
</script>
</html>